<template>
  <Modal v-model="modal" title="确认结算">
    <div>
      <Form :model="form" :label-width="100" :rules="rules" ref="form">
        <FormItem label="金额(元)" prop="couponAmount">
          <InputNumber :min="1" v-model.trim="form.couponAmount"></InputNumber>
        </FormItem>
        <FormItem label="结算说明" prop="remark">
          <Input v-model="form.remark" type="textarea" :maxlength="300" :autosize="{minRows: 5}"/>
        </FormItem>
        <Loader :status="form.status"></Loader>
      </Form>
    </div>
    <div slot="footer">
      <Button class="mr" size="large" @click="modal = false">取消</Button>
      <Button type="primary" :disabled="btnDisabled" size="large" @click="onSave">确定</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  data () {
    return {
      id: '',
      oldAmount: '',
      modal: false,
      btnDisabled: false,
      couponAmount: null,
      remark: null,
      form: {
        settlementAmount: null,
        couponAmount: null,
        remark: null,
        status: 'pass',
        deDisabled: false
      },
      rules: {
        couponAmount: [{ required: true, message: '请输入金额' }]
      }
    }
  },
  methods: {
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.id = ''
      this.form.remark = null
      this.form.settlementAmount = null
      this.form.couponAmount = null
      this.form.deDisabled = false
      this.btnDisabled = false
    },
    updateForm(item) {
      this.resetForm()
      this.form = {
        couponAmount: item.couponAmount,
        remark: item.remark
      }
      this.remark = item.remark,
      this.couponAmount = item.couponAmount,
      this.oldAmount = item.couponAmount ? item.couponAmount.toFixed(2) : '',
      this.id = item.id
      this.openModal()
    },
    onSave() {
      if(this.form.status === 'loading') return
      if(this.oldAmount !== '' && this.form.couponAmount > this.oldAmount) {
        this.$Notice.error({
          title: '金额只能改小,不能改大'
        })
      } else {
        this.$refs.form.validate(valid => {
          if(valid) {
            let param = {
              id: this.id,
              remark: this.form.remark ? this.form.remark : this.remark,
              settlementAmount: this.form.couponAmount
            }
            let text = '结算'
            let url = '/coupon/coupon_settlement/settlement'
            this.form.status = 'loading'
            this.btnDisabled = true
            this.$ajaxPost(url, param).then(data =>{
              this.$emit('complete')
              this.closeModal()
              this.$Notice.success({
                title: text + '成功'
              })
              this.form.status = 'pass'
            }).catch(() => {
              this.btnDisabled = false
              this.$Notice.error({
                title: text + '失败'
              })
            })
          }
        })
      }
    }
  }
}
</script>